document.addEventListener('DOMContentLoaded', function() {
    // 初始化表单功能
    initForm();

    // 添加页面动画效果
    addPageAnimations();
});

function initForm() {
    const ticketForm = document.getElementById('ticketForm');
    const qqNumber = document.getElementById('qqNumber');
    const feedbackType = document.getElementById('feedbackType');
    const severityRating = document.querySelectorAll('input[name="severity"]');
    const description = document.getElementById('description');
    const screenshots = document.getElementById('screenshots');
    const previewContainer = document.getElementById('previewContainer');
    const submitBtn = document.getElementById('submitBtn');

    // 创建成功消息元素
    const successMessage = document.createElement('div');
    successMessage.className = 'success-message';
    successMessage.textContent = '✿ 工单提交成功啦！我们会尽快处理你的问题哦~ ✿';
    ticketForm.parentNode.appendChild(successMessage);

    // QQ号码验证
    qqNumber.addEventListener('input', function() {
        const qqError = document.getElementById('qqError');
        const qqRegex = /^[1-9][0-9]{4,10}$/;
        if (!qqRegex.test(this.value)) {
            qqError.textContent = '请输入有效的QQ号码（5-11位数字，不能以0开头）';
        } else {
            qqError.textContent = '';
        }
    });

    // 反馈类型验证
    feedbackType.addEventListener('change', function() {
        const typeError = document.getElementById('typeError');
        if (!this.value) {
            typeError.textContent = '请选择反馈类型';
        } else {
            typeError.textContent = '';
        }
    });

    // 问题严重程度验证
    severityRating.forEach(radio => {
        radio.addEventListener('change', function() {
            const severityError = document.getElementById('severityError');
            severityError.textContent = '';
        });
    });

    // 问题描述验证
    description.addEventListener('input', function() {
        const descriptionError = document.getElementById('descriptionError');
        if (this.value.trim().length === 0) {
            descriptionError.textContent = '请描述您遇到的问题';
        } else if (this.value.length > 2000) {
            descriptionError.textContent = '问题描述不能超过2000个字符';
        } else {
            descriptionError.textContent = '';
        }
    });

    // 图片上传预览
    screenshots.addEventListener('change', function(e) {
        const fileError = document.getElementById('fileError');
        fileError.textContent = ''; // 重置错误信息

        const files = e.target.files;
        const validTypes = ['image/jpeg', 'image/png', 'image/bmp', 'image/webp'];
        const maxSize = 5 * 1024 * 1024; // 5MB
        const maxFiles = 5; // 最大上传数量
        const currentFiles = previewContainer.querySelectorAll('.previewImage').length;

        // 检查是否超过最大上传数量
        if (currentFiles + files.length > maxFiles) {
            fileError.textContent = `最多只能上传${maxFiles}张图片`;
            this.value = ''; // 清除选择
            return;
        }

        let hasError = false;
        const errorMessages = [];

        // 先检查所有文件是否有效
        for (let i = 0; i < files.length; i++) {
            const file = files[i];

            // 验证文件类型
            if (!validTypes.includes(file.type)) {
                errorMessages.push(`文件 ${file.name} 类型不支持，请上传JPG、PNG、BMP或WebP格式的图片`);
                hasError = true;
            }

            // 验证文件大小
            if (file.size > maxSize) {
                errorMessages.push(`文件 ${file.name} 超过5MB大小限制`);
                hasError = true;
            }
        }

        // 显示所有错误信息
        if (hasError) {
            fileError.innerHTML = errorMessages.join('<br>');
            this.value = ''; // 清除选择
            return;
        }

        // 处理有效的图片预览
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const reader = new FileReader();

            reader.onload = function(e) {
                // 创建图片容器，包含预览图和删除按钮
                const imgContainer = document.createElement('div');
                imgContainer.className = 'img-preview-container';
                imgContainer.style.position = 'relative';

                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'previewImage';
                img.title = file.name; // 显示文件名
                img.style.borderRadius = '12px';
                img.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)';

                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'delete-img-btn';
                deleteBtn.innerHTML = '✕'; // 叉号图标
                deleteBtn.title = '删除这张图片';
                deleteBtn.style.position = 'absolute';
                deleteBtn.style.top = '-10px';
                deleteBtn.style.right = '-10px';
                deleteBtn.style.width = '25px';
                deleteBtn.style.height = '25px';
                deleteBtn.style.borderRadius = '50%';
                deleteBtn.style.backgroundColor = 'var(--primary)';
                deleteBtn.style.color = 'white';
                deleteBtn.style.border = 'none';
                deleteBtn.style.cursor = 'pointer';
                deleteBtn.style.display = 'flex';
                deleteBtn.style.alignItems = 'center';
                deleteBtn.style.justifyContent = 'center';
                deleteBtn.style.fontWeight = 'bold';
                deleteBtn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';

                // 删除图片事件
                deleteBtn.addEventListener('click', function() {
                    gsap.to(imgContainer, { opacity: 0, scale: 0.8, duration: 0.3, onComplete: function() {
                        imgContainer.remove();
                        // 重新创建FileList（这是一个简化处理，实际项目可能需要更复杂的逻辑）
                        screenshots.value = '';
                    }});
                });

                imgContainer.appendChild(img);
                imgContainer.appendChild(deleteBtn);
                previewContainer.appendChild(imgContainer);

                // 添加图片入场动画
                gsap.from(imgContainer, { opacity: 0, y: 20, duration: 0.5 });
            };

            reader.readAsDataURL(file);
        }
    });

    // 表单提交
    ticketForm.addEventListener('submit', function(e) {
        e.preventDefault();

        // 验证表单
        const errors = [];

        if (!/^[1-9][0-9]{4,10}$/.test(qqNumber.value)) {
            errors.push('请输入有效的QQ号码（5-11位数字，不能以0开头）');
        }

        if (!feedbackType.value) {
            errors.push('请选择反馈类型');
        }

        let severitySelected = false;
        severityRating.forEach(radio => {
            if (radio.checked) {
                severitySelected = true;
            }
        });
        if (!severitySelected) {
            errors.push('请选择问题严重程度');
        }

        if (!description.value.trim()) {
            errors.push('请描述您遇到的问题');
        } else if (description.value.length > 2000) {
            errors.push('问题描述不能超过2000个字符');
        }

        if (errors.length > 0) {
            alert(errors.join('\n'));
            return;
        }

        // 添加提交按钮动画
        submitBtn.disabled = true;
        submitBtn.querySelector('span').textContent = '提交中...';
        submitBtn.querySelector('.sparkle').style.display = 'none';

        // 提交表单数据
        const formData = new FormData(this);

        fetch('submit_ticket.php', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP错误! 状态码: ${response.status}`);
            }
            return response.text(); // 获取文本响应
        })
        .then(text => {
            // 尝试解析为JSON，如果失败则作为纯文本处理
            try {
                const data = JSON.parse(text);
                if (data.success) {
                    // 上传图片（如果有）
                    uploadImages(data.ticket_id);
                } else {
                    alert('提交失败: ' + (data.message || '未知错误'));
                    submitBtn.disabled = false;
                    submitBtn.querySelector('span').textContent = '提交工单';
                    submitBtn.querySelector('.sparkle').style.display = 'inline';
                }
            } catch (e) {
                // 不是有效的JSON，作为纯文本处理
                console.log('表单提交响应:', text);
                // 假设提交成功，尝试上传图片
                // 注意：这里无法获取ticket_id，可能需要修改后端逻辑
                uploadImages(0); // 使用0作为默认值
            }
        })
        .catch(error => {
            console.error('提交错误:', error);
            alert('提交失败，请稍后再试');
            submitBtn.disabled = false;
            submitBtn.querySelector('span').textContent = '提交工单';
            submitBtn.querySelector('.sparkle').style.display = 'inline';
        });
    });

    // 上传图片函数
    function uploadImages(ticketId) {
        const imageCount = previewContainer.querySelectorAll('.previewImage').length;
        if (imageCount === 0) {
            // 没有图片需要上传，直接完成
            showSuccessMessage();
            return;
        }

        // 创建FormData对象
        const formData = new FormData();
        formData.append('ticket_id', ticketId);

        // 获取所有选中的文件
        const files = screenshots.files;
        if (files && files.length > 0) {
            // 添加文件到FormData
            for (let i = 0; i < files.length; i++) {
                formData.append('screenshots[]', files[i]);
            }

            // 发送图片数据到后端 - 不使用JSON
            fetch('upload_image_alt.php', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }
                return response.text(); // 直接获取文本响应
            })
            .then(text => {
                // 不尝试解析JSON，直接处理文本响应
                console.log('图片上传响应:', text);
                // 可以在这里添加文本响应的显示逻辑
                showSuccessMessage();
            })
            .catch(error => {
                // 图片上传失败，仍然显示工单提交成功，但记录错误
                console.error('图片上传失败: ', error);
                showSuccessMessage();
            });
        } else {
            // 没有文件，但有预览图（可能是之前上传的）
            showSuccessMessage();
        }
    }

    // 显示成功消息
    function showSuccessMessage() {
        successMessage.style.display = 'block';
        gsap.from(successMessage, { opacity: 0, y: -20, duration: 0.5 });

        // 重置表单
        ticketForm.reset();
        previewContainer.innerHTML = '';

        // 恢复按钮状态
        submitBtn.disabled = false;
        submitBtn.querySelector('span').textContent = '提交工单';
        submitBtn.querySelector('.sparkle').style.display = 'inline';

        // 3秒后隐藏成功消息
        setTimeout(() => {
            gsap.to(successMessage, { opacity: 0, y: -20, duration: 0.5, onComplete: function() {
                successMessage.style.display = 'none';
            }});
        }, 3000);
    }
}

function addPageAnimations() {
    // 为表单元素添加入场动画
    const formGroups = document.querySelectorAll('.form-group');
    formGroups.forEach((group, index) => {
        gsap.from(group, {
            opacity: 0,
            y: 20,
            duration: 0.5,
            delay: index * 0.1
        });
    });

    // 为标题添加呼吸效果
    const title = document.querySelector('.anime-title');
    gsap.to(title, {
        scale: 1.05,
        duration: 2,
        repeat: -1,
        yoyo: true
    });

    // 创建漂浮的爱心
    createFloatingHearts();
}

function createFloatingHearts() {
    const container = document.querySelector('body');
    const colors = ['#ff6b8b', '#ff9fb0', '#8a5cf2', '#b594ff', '#ffb74d'];

    function createHeart() {
        const heart = document.createElement('div');
        heart.innerHTML = '♡';
        heart.style.position = 'fixed';
        heart.style.left = Math.random() * 100 + 'vw';
        heart.style.top = '100vh';
        heart.style.fontSize = Math.random() * 20 + 10 + 'px';
        heart.style.color = colors[Math.floor(Math.random() * colors.length)];
        heart.style.opacity = Math.random() * 0.7 + 0.3;
        heart.style.pointerEvents = 'none';
        heart.style.zIndex = '100';
        heart.style.transform = 'rotate(' + Math.random() * 360 + 'deg)';

        container.appendChild(heart);

        gsap.to(heart, {
            y: -1000,
            x: Math.random() * 100 - 50,
            duration: Math.random() * 10 + 10,
            ease: 'linear',
            onComplete: function() {
                heart.remove();
            }
        });

        // 随机时间后创建下一个爱心
        setTimeout(createHeart, Math.random() * 3000 + 1000);
    }

    // 开始创建爱心
    createHeart();
}